<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .mytable {
        text-align: center;
    }
  </style>
</head>
<body>
  
  <div id ="app">
    <h1>小黑的礼物单</h1>
    <table border="1" class="mytable" width="300" height="200">
      <tr> <th>名字</th><th>数量</th></tr>
      <tr v-for="item in arr" :key="item.id">
        <td>{{item.name}}</td>
        <td>{{item.num}}个</td>
      </tr>
    </table>
    <p>礼物总数：{{totalSum}} 个</p>
    <p>礼物总数：{{totalSum}} 个</p>
    <p>礼物总数：{{totalSum}} 个</p>
    <p>礼物总数：{{totalSum}} 个</p>
  </div>
  <script src="js/vue.js"></script> 
  <script>
    const app =new Vue({
      el:'#app',
      data:{
        arr:[
          {id:1,name:'篮球',num:2},
          {id:2,name:'玩具',num:3},
          {id:3,name:'铅笔',num:4}
        ],
      },
      // 计算属性  有缓存  多次计算结果 就用这个计算属性
      computed:{
        totalSum(){
          console.log('计算属性执行了');
          let total = this.arr.reduce((sum,item)=> sum + item.num,0);
          return total;
        }
      }
    
    })
  </script>
</body>
</html>